<template>
  <div class="marginClass" id="mar" @mouseleave="outHover">
    <div class="order">
      <div class="types" id="logo" @click="clickLog()">
          <img src="~assets/img/logo.gif" id="logoimg"/>
          <span class="logofont">欢太商城</span>
      </div>
      <div v-for="(item,index) in content.comType" class="types"
           @mouseenter="showPro(index)"
           @mouseover="getHover(index)">
        <span class="fontsty">{{item.type}}</span>
      </div>
      <div class="types">
        <el-menu :default-active="content.activeIndex" background-color="transparent" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-submenu index="2">
            <template #title>
              <img src="../../../assets/img/shoppingCar-white.png"  id="shoppingCar" />
            </template>
            <el-menu-item index="2-1" @click="shoppingCar()">
              <i class="el-icon-shopping-cart-1"></i>
              购物车
            </el-menu-item>
            <el-menu-item index="2-2" @click="parsonEnter()">
              <i class="el-icon-user"></i>
              个人中心
            </el-menu-item>
            <el-menu-item index="2-3" @click="login()">
              <i class="el-icon-warning-outline"></i>
              <span v-if="!logStatusVal">登陆</span>
              <span v-if="logStatusVal">退出</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <div v-show="content.isShowPro">
      <div class="showTier">
          <div v-for="item in content.tempShowData" class="showImgTier">
            <img :src="item.imgUrl" class="showImg" @click="clickComImg(item.contentUrl)">
            <span class="serFont">{{item.proName}}</span>
            <span class="statusFont">{{item.status}}</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {fadeIn,fadeOut} from "commonjs/const/fadeInAndOut.js"
  import {preSha} from "commonjs/const/preShake";



  import {mapGetters,mapState,mapActions} from "vuex"

  let timeout = new Array();
  let elem;
  //保存文字元素
  let fontElement;
  export default {
    name: "ProductType",
    props: {
      fontCol: {//传入false说明让字体颜色一直是黑色
        type: Boolean,
        default: true
      }
    },
    computed: {
      ...mapGetters({
        topNav: "topNav/getData",
        /*logStatus: "UserMsg/getLogStatus"*/
      }),
      ...mapState({
        logStatus: state => state.UserMsg.UserMsg.logStatus
      })
    },
    watch:{
      logStatus:{
        immediate:true,
        handler: function(newVal){
          this.logStatusVal = newVal;
        }
      }
    },
    created() {
      this.content = this.topNav;
      this.logStatus;
    },
    data(){
      return {
        content: {},
        logStatusVal: false
      }
    },
    mounted() {
      if (!this.fontCol) {//判断其他使用该组件的组件传入的值是否为false，如果为false说明它们不想要字体变成白色
        let tempVar = document.getElementsByClassName("fontsty");
        this.updateColor(tempVar,"black")
        let logoFont = document.querySelector(".logofont");
        this.updateColor(logoFont,"black");
        document.querySelector("#shoppingCar").src = require("../../../assets/img/shoppingCar-black.png");
      }
    },
    methods: {
      ...mapActions({
        clearData: "UserMsg/clearData",
        updateLogStatus: "UserMsg/updateLogStatus"
      }),
      clickComImg(comId){//点击商品跳转到详情页面
        //跳转到详情页面，带商品编号
        this.$router.push({path: "/detail",query: {comId}})
        //在点击的时候让下拉栏收起来
        this.outHover();
        //发送事件
        this.$emit("clickprotype",{comId:comId});
      },
      parsonEnter(){//点击去往个人中心
        this.$router.push("/personEnter")
      },
      login(){//点击登录-->分为两种状态，logStataus=false：说明是准备登录，logStatus=true：说明用户是准备退出
        if (!this.logStatusVal) this.$router.push("/log")
        else {
          //跳转到首页
          this.$router.push({path: "/home"});
          //将sessionStorage中的数据清空
          //sessionStorage.setItem("userMsg",JSON.stringify({...JSON.parse(sessionStorage.getItem("userMsg")),logStatus: false}));
          sessionStorage.removeItem("userMsg");
          //将状态修改为false
          this.updateLogStatus(false);
          //将用户数据清空
          this.clearData();
        }
      },
      shoppingCar(){//点击购物车
        this.$router.push("/shoppingcar")
      },
      handleSelect(key, keyPath) {
        /*console.log(key, keyPath);*/
      },
      clickLog(){//点击log函数
        this.$router.push("/home");
      },
      getHover(index){//光标悬浮函数
        //让文字改变颜色
        fontElement = document.getElementsByClassName("fontsty");
        //logo文字
        var logoFont = document.querySelector(".logofont");
        this.updateColor(fontElement,"black");
        this.updateColor(logoFont,"black");
        this.updateColor(fontElement[index],"silver")
        //更改购物车图标样式
        document.querySelector("#shoppingCar").src = require("../../../assets/img/shoppingCar-black.png");
        //将层拉大
        document.querySelector("#mar").style.height = "350px";
      },
      outHover(){//光标离开函数
        //让下拉栏缩小
        document.querySelector("#mar").style.height = "0px";
        //如果本身是false，就说明这是第二次离开
        if (!this.content.isShowPro) {
          setTimeout(() => {
            this.content.isShowPro = false;
          },500);
        }else {
          //让商品不展示
          this.content.isShowPro = false;
        }
        //光标离开后让文字变成白色
        if (this.fontCol) this.updateColor(fontElement,"white"); else  this.updateColor(fontElement,"black")
        let logoFont = document.querySelector(".logofont");
        if (this.fontCol) this.updateColor(logoFont,"white");
        //更改购物车图标样式
        if (this.fontCol) document.querySelector("#shoppingCar").src = require("../../../assets/img/shoppingCar-white.png");
      },
      showPro(index){//光标进入函数
        let tempArr = timeout;
        for (let timeoutElement of tempArr) {
          clearTimeout(timeoutElement);
        }
        //调用抖动函数
        preSha(this.animationFunc,index,400)();
      },
      animationFunc(index){//这是展示动画函数
        //判断上次展示的动画都隐藏后再开始第二次展示
        if (this.opacity(elem)){
          //打开展示图片的层
          this.content.isShowPro = true;
          //延迟展示
          setTimeout(() => {
            //通过光标悬浮得到下标，通过下标得到商品
            this.content.tempShowData = this.content.comType[index].content;
            //拿到即将展示的图片区域的元素
            let className = document.getElementsByClassName("showImgTier");
            elem = className;
            //隐藏所有要显示的图片
            this.opacity(className);
            //通过循环调用渐入渐出函数对每个商品进行展示
            for (let i = 0; i < className.length; i++) {
              timeout.push(setTimeout(() => {
                fadeIn(className[i],30);
              },i*200));
            }
          },200)
        }
      },
      opacity(ele){//隐藏元素函数
        if (ele) for (let classNameKey of ele) {
          classNameKey.style.opacity = 0;
        }
        return true;
      },
      updateColor(element,color){//更改文字的颜色
        if (element && element.length>1 || element instanceof Array){
          if (element && element.length){
            for (let elementElement of element) {
              elementElement.style.color = color;
            }
          }
        }else if (element && element!=length){
          element.style.color = color;
        }
      }
    }
  }

</script>

<style scoped>
  /*这是商品展示区*/
  .showTier{
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
  }

  .showImg{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 130px;
    height: 130px;
    margin-bottom: 13%;
  }

  .showImgTier{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 180px;
  }

  .showImgTier:hover{
    color: silver;
    cursor: pointer;
  }

  .serFont{
    font-size: 16px;
  }

  .statusFont{
    font-size: 13px;
    color: cyan;
  }

  /*这是类型区*/
  .order{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0px 10%;
    align-items: center;
    /*background-color: yellow;*/
  }
  img{
    width: 52px;
    height: 52px;
    background-size: cover;
  }
  #shoppingCar{
    /*background-image: url("~assets/img/shoppingCar-white.png");*/
    width: 24px;
    height: 24px;
    background-size: cover;
  }
  .types{
    display: flex;
    justify-content: center;
    margin: 0% 0%;
    width: 13%;
    /*background-color: aqua;*/
    line-height: 90px;
    cursor: pointer;
  }

  .fontsty{
    font-size: 18px;
    /*font-family: PingFang SC;
    font-weight: bold;*/
    color: white;
  }


  #logo{
    display: flex;
    width: 15%;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 0.4;
    cursor: pointer;
  }
  .logofont{
    font-size: 35px;
    font-family: "STLiti";
    margin-left: 8%;
    color: white;
  }
  .marginClass{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 0px;
    transition: height 0.3s;
    transition-timing-function: ease-in;
    background-color: white;
  }
</style>
